<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../../js/class/jquery-3.0.0.min.js"></script>
		
		<style type="text/css">
			.imgContainer,.backgroundContainer {
				width: 100px;
				height: 100px;
			}
			.imgContainer img {
				width: 100%;
				height: 100%;
			}
			.backgroundContainer {
				background: url(../../img/icon/Entrust.png) no-repeat;
				background-size: 100% 100%;
				/* -webkit-filter: grayscale(100%); *//* Chrome, Safari, Opera */
				/* filter: grayscale(100%); *//* 谷歌不适用,仅火狐（35及之后适用） */
				
			}
			.backgroundContainer .backgroundTitle {
				position: relative;
				
			}
			/* CSS3
				filter(滤镜)属性
				ie暂时并不支持该属性。ie可用<canvas>标签进行js修改。
				
				属性值
				blur(px)			//给图像设置高斯模糊。值越大越模糊。
				brightness(%)		//(bright：adj，明亮的，鲜亮的)给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。可大于100%
				contrast(%)			//(contrast: vi.&vt. 对比 n. 对比/对比度 )调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%
				drop-shadow(h-shadow v-shadow blur spread color)
						//
			 */
		</style>
	</head>
	<body>
		<p>方法一（）</p>
		<div class="container1">
			<div class="backgroundContainer" style="-webkit-filter: grayscale(100%);">
				<div class="backgroundTitle">grayscale(100%)</div>
			</div>
			<div class="backgroundContainer" style="-webkit-filter: blur(2px);">
				<div class="backgroundTitle">blur(2px)</div>
			</div>
			<div class="backgroundContainer" style="-webkit-filter: brightness(1000%);">
				<div class="backgroundTitle">brightness(100%)</div>
			</div>
			<div class="backgroundContainer" style="-webkit-filter: saturate(200%);">
				<div class="backgroundTitle">saturate(200%)</div>
			</div>
			<div class="backgroundContainer" style="-webkit-filter: contrast(200%);">
				<div class="backgroundTitle">contrast(200%)</div>
			</div>
			<div class="backgroundContainer" style="-webkit-filter: drop-shadow(10px 10px 3px);"><!-- 这里的第四位参数设置 -->
				<div class="backgroundTitle">drop-shadow(10px )</div>
			</div>
		</div>
		<p>方法二（）</p>
		<div class="container2">
			<div class="imgContainer">
				<img id="FinancImg" src="../../img/icon/Financing.png" />
			</div>
		</div>
		<script type="text/javascript">
			var imgobj = document.getElementById("FinancImg");
			function ImgToGray(){
				var canvas = document.createElement("canvas");
				var canvasContext = canvas.getContext("2d");
				var imgW = imgobj.width;
				var imgH = imgobj.height;
				canvas.width = imgW;
				console.log(imgW);
				canvas.height = imgH;
				console.log(imgH);
				canvasContext.drawImage(imgobj,0,0);
				//drawImage(image,x,y)
				//drawImage(image,x,y,width,height)
				//drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)
				//img						//所要绘制的图像
				//x,y						//绘制的图像的左上角位置
				//width,height				//绘制图像的大小
				//sourceX,sourceH			//
				//sourceWidth,sourceHeight
				//destX,destY
				//destWidth,destHeight
				//第三个变形则是完全通用的，它允许您指定图像的任何矩形区域并复制它，对画布中的任何位置都可进行任何的缩放。
				var imgPixels = canvasContext.getImageData(0,0,imgW,imgH);
				console.log(imgPixels)
				for(var y=0;y<imgPixels.height;y++){//y为高的每一个像素px
					for(var x = 0; x < imgPixels.width;x++){
						var i = (y * 4) * imgPixels.width + x * 4;//其获取的是rgb三原色数据,所以3个为一组
						//[0],1,2,3,[4],5,6,7,[8],9...
						
						var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3;//
						imgPixels.data[i] = avg;
						imgPixels.data[i + 1] = avg;
						imgPixels.data[i + 2] = avg;
					}
				}
				console.log(imgPixels.width);//获取的高度依然为100px(同css设置的width)
				canvasContext.putImageData(imgPixels,0,0,0,0,imgPixels.width,imgPixels.height);
				console.log(canvas.toDataURL())
				return canvas.toDataURL();
			}
			imgobj.onload = function(){
				imgobj.src = ImgToGray(imgobj);
				imgobj.onload = null;//如果不将该绑定事件消除,该事件会陷入时锁中
			}
				
		</script>
	</body>
</html>